<template>
  <a-flex gap="small" justify="flex-end">
    <a-button @click="loadModelTree(props.model)" :title="$t('104')">{{
      $t("104")
    }}</a-button>
    <a-button type="primary" @click="saveTags">{{ $t("224") }}</a-button>
  </a-flex>
  <a-row>
    <a-col :span="12">
      <a-table
        :columns="columns"
        :data-source="treeData"
        size="small"
        :row-selection="rowSelection"
        :pagination="false"
      />
    </a-col>
    <a-col :span="12" style="padding: 4px; background-color: #f8f8f8">
      <label style="padding-top: 5px">{{ $t("405") }}</label>
      <br />
      <a-input v-model:value="currentTag.code" @change="keepTag" />
      <br />
      <br />
      <a-list size="small" bordered>
        <a-list-item>{{ $t("406") }}</a-list-item>
        <a-list-item>{{ $t("407") }}</a-list-item>
        <a-list-item>{{ $t("408") }}</a-list-item>
        <a-list-item>{{ $t("409") }}</a-list-item>
      </a-list>
    </a-col>
  </a-row>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const props = defineProps({ model: Object });
const treeData = reactive([]);
const currentTag = reactive({
  id: 0,
  code: "",
});
const columns = [
  { title: t("129"), dataIndex: "label" },
  { title: t("130"), dataIndex: "code" },
];

const loadTags = (modelObject) => {
  CommonDefine.apiGetArm(
    `/api/v1/share/tags/${modelObject.id}`,
    (d) => {
      treeData[0].code = d[treeData[0].key];
      treeData[0].children.forEach((node) => {
        node.code = d[node.key];
      });
    },
    false
  );
};

const loadModelTree = (modelObject) => {
  treeData.splice(0, treeData.length);
  let treeRootNode = {
    key: modelObject.id,
    label: modelObject.name,
    code: undefined,
    children: [],
  };
  let fn = (fields) => {
    fields.forEach((fd) => {
      let treeLeafNode = { key: fd.id, label: fd.label, code: undefined };
      treeRootNode.children.push(treeLeafNode);
    });
    treeData.push(treeRootNode);
    loadTags(modelObject);
  };
  CommonDefine.runWithFieldCache(modelObject.id, fn);
};

const rowSelection = ref({
  type: "radio",
  hideSelectAll: true,
  onChange: (selectedRowKeys, selectedRows) => {
    // console.log(selectedRowKeys);
    // console.log(selectedRows);
    currentTag.id = selectedRowKeys[0];
    if (treeData[0].key == currentTag.id) {
      currentTag.code = treeData[0].code;
    } else {
      treeData[0].children.forEach((node) => {
        if (node.key == currentTag.id) {
          currentTag.code = node.code;
        }
      });
    }
  },
});

const keepTag = () => {
  if (treeData[0].key == currentTag.id) {
    treeData[0].code = currentTag.code;
  } else {
    treeData[0].children.forEach((node) => {
      if (node.key == currentTag.id) {
        node.code = currentTag.code;
      }
    });
  }
};

const saveTags = () => {
  let pd = {
    modelId: treeData[0].key,
    modelCode: treeData[0].code,
    fields: [],
  };
  treeData[0].children.forEach((node) => {
    pd.fields.push({ id: node.key, code: node.code });
  });
  CommonDefine.apiPostArm("/api/v1/share/save-tags", pd, (d) => {
    CommonDefine.alert(t("410"));
  });
};

watch(
  () => props.model,
  (newValue) => {
    loadModelTree(newValue);
  },
  {
    immediate: true,
  }
);
</script>
